<template>
  <div>
    <a-card :bordered="false">
      <a-spin :spinning="loading">
        <a-alert type="success" style="margin-bottom:10px;">
          <template slot="message">
            <a-icon type="info-circle" style="margin-right:5px;" />微信支付授权目录：
            <a
              class="copy_content"
              :data-clipboard-text="hostUrl+`/h5/`"
              @click="copy"
            >{{hostUrl}}/h5/</a>
          </template>
        </a-alert>
        <a-form-model ref="form" :rules="rules" v-bind="layout" :model="form">
          <a-form-model-item label="商户类型">
            <a-radio-group v-model="form.type">
              <a-radio :value="1">普通商户</a-radio>
              <a-radio :value="2">子商户</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="商户号" prop="mch_id">
            <a-input v-model="form.mch_id" placeholder="请输入商户号" style="width:75%;" />
          </a-form-model-item>
          <a-form-model-item label="支付秘钥" prop="key">
            <a-input v-model="form.key" placeholder="请输入支付秘钥" style="width:75%;margin-right:10px;" />
            <a-button @click="getStateCode(32)">自动生成</a-button>
          </a-form-model-item>
          <a-form-model-item label="子商户AppId" v-if="form.type==2" prop="sub_appid">
            <a-input v-model="form.sub_appid" placeholder="请输入子商户AppId" style="width:75%;" />
          </a-form-model-item>
          <a-form-model-item label="子商户号" v-if="form.type==2" prop="sub_mch_id">
            <a-input v-model="form.sub_mch_id" placeholder="请输入子商户号" style="width:75%;" />
          </a-form-model-item>
          <a-form-model-item :wrapperCol="{ span: 3,offset: 2 }">
            <a-button type="primary" @click="submit('form')">保存</a-button>
          </a-form-model-item>
        </a-form-model>
      </a-spin>
    </a-card>
  </div>
</template>
<script>
import { paySetting, getPaySetting } from '@/api/organization'
import Clipboard from 'clipboard'
export default {
  data() {
    return {
      layout: {
        labelCol: { span: 2 },
        wrapperCol: { span: 8 },
      },
      loading: false,
      form: {
        type: 1,
        mch_id: '',
        key: '',
      },
      hostUrl: null,
      rules: {
        mch_id: [
          { required: true, message: '请输入商户号！' },
          {
            message: '商户号只能是数字',
            pattern: /^\d+$|^\d+[.]?\d+$/,
            trigger: 'blur',
          },
        ],
        key: [
          { required: true, message: '请输入支付秘钥！' },
          {
            min: 32,
            max: 32,
            message: '支付秘钥是数字,英文字母，长度为32位',
            // pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{32,32}$/,
            pattern: /^[0-9a-zA-Z]{32,32}$/,
            trigger: 'blur',
          },
        ],
        sub_appid: [
          { required: true, message: '请输入子商户AppId！' },
          {
            message: '子商户AppId只能是数字和字母',
            pattern: /^([A-Z]|[a-z]|[0-9])*$/,
            trigger: 'blur',
          },
        ],
        sub_mch_id: [
          { required: true, message: '请输入子商户号！' },
          {
            message: '子商户号只能是数字',
            pattern: /^\d+$|^\d+[.]?\d+$/,
            trigger: 'blur',
          },
        ],
      },
    }
  },
  created() {
    let ishttps = 'https:' == document.location.protocol ? true : false
    if (ishttps) {
      this.hostUrl = 'https://' + window.location.host
    } else {
      this.hostUrl = 'http://' + window.location.host
    }
    this.loading = true
    getPaySetting({ school_id: this.$store.state.user.school, key: 'pay_setting' })
      .then((res) => {
        if (res.value&&!(res.value instanceof Array)) {
          this.form = res.value
        }else{
          
        }
      })
      .finally(() => {
        this.loading = false
      })
  },
  methods: {
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          let params = JSON.parse(JSON.stringify(this.form))
          paySetting({
            school_id: this.$store.state.user.school,
            key: 'pay_setting',
            value: params,
          })
            .then((res) => {
              this.$message.success('设置成功')
            })
            .catch((err) => {
              this.$message.error('设置失败')
            })
            .finally(() => {
              this.loading = false
            })
        } else {
          return false
        }
      })
    },
    getStateCode(codeLen) {
      let arr = [
        'a',
        'b',
        'c',
        'd',
        'e',
        'f',
        'g',
        'h',
        'i',
        'j',
        'k',
        'l',
        'm',
        'n',
        'o',
        'p',
        'q',
        'r',
        's',
        't',
        'u',
        'v',
        'w',
        'x',
        'y',
        'z',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z',
        '0',
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9',
      ]
      let code = ''
      let len = arr.length
      for (let i = 0; i < codeLen; i++) {
        let x = Math.floor(Math.random() * len)
        code += arr[x]
      }
      this.form.key = code
    },
    copy() {
      let clipboard = new Clipboard('.copy_content')
      let that = this
      clipboard.on('success', (e) => {
        that.$message.success('复制成功')
        clipboard.destroy()
      })
      clipboard.on('error', (e) => {
        // 不支持复制
        that.$message.error('该浏览器不支持自动复制')
        console.log('该浏览器不支持自动复制') // 释放内存
        clipboard.destroy()
      })
    },
  },
}
</script>

<style lang="less" scoped>
</style>